<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">编辑地址</div>
    </v-ons-toolbar>
    <div class="container">
      <div class="main-group">
        <div class="input-group">
          <span class="input-addo">收货人</span>
          <input v-model="name" type="text" placeholder="请输入收货人姓名"  class="input-control">
        </div>
        <div class="input-group">
          <span class="input-addo">手机号</span>
          <input v-model="phoneNumber" type="text" placeholder="请输入手机号"  class="input-control">
        </div>
        <div class="input-group" @click="showPicker">
          <span class="input-addo">地区</span>
          <p class="picker">
            <span v-for="(regionItem,index) in region" v-if="region != ''">{{regionItem.value}} </span>
            <span v-if="region == ''">请选择地区</span>
            <span class="fa fa-caret-down picker-icon"></span>
          </p>
        </div>
        <div class="input-group">
          <span class="input-addo">地址</span>
          <input v-model="address" type="text" placeholder="请输入具体地址"  class="input-control">
        </div>

        <button class="btn">确认</button>
      </div>

      <awesome-picker
                      ref="picker"
                      :data="picker.data"
                      @confirm="handlePickerConfirm">
      </awesome-picker>
    </div>
  </v-ons-page>
</template>

<script>
  import areaData from '../../utils/area'
  export default {
    data() {
      return {
        name:'',
        phoneNumber: '',
        region:'',
        address: '',
        picker: {
          anchor: [],
          textTitle: '区域选择器',
          data: areaData
        }
      }
    },
    methods:{
      handlePickerConfirm (v) {
        let value = v ? v : null;
        if(value){
          this.region = value;
        }
      },
      showPicker () {
        this.$refs.picker.show()
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/editor-address.less";
</style>
